<template>
  <div class="notification-stats">
    <h3 class="section-title">通知统计</h3>
    <div class="stats-grid">
      <!-- 未读通知统计卡片 -->
      <div class="stat-card unread-card">
        <div class="stat-icon">
          <el-badge :value="stats.unread" :max="99" type="danger">
            <el-icon :size="24"><Bell /></el-icon>
          </el-badge>
        </div>
        <div class="stat-content">
          <div class="stat-title">未读通知</div>
          <div class="stat-value">{{ stats.unread }}</div>
          <div class="stat-trend" :class="getTrendClass(stats.unreadTrend)">
            <el-icon><component :is="getTrendIcon(stats.unreadTrend)" /></el-icon>
            <span>{{ Math.abs(stats.unreadTrend) }}%</span>
          </div>
        </div>
      </div>

      <!-- 系统通知统计卡片 -->
      <div class="stat-card system-card">
        <div class="stat-icon">
          <el-icon :size="24"><Message /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-title">系统通知</div>
          <div class="stat-value">{{ stats.system }}</div>
          <div class="stat-trend" :class="getTrendClass(stats.systemTrend)">
            <el-icon><component :is="getTrendIcon(stats.systemTrend)" /></el-icon>
            <span>{{ Math.abs(stats.systemTrend) }}%</span>
          </div>
        </div>
      </div>

      <!-- 分享通知统计卡片 -->
      <div class="stat-card share-card">
        <div class="stat-icon">
          <el-icon :size="24"><Share /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-title">分享通知</div>
          <div class="stat-value">{{ stats.share }}</div>
          <div class="stat-trend" :class="getTrendClass(stats.shareTrend)">
            <el-icon><component :is="getTrendIcon(stats.shareTrend)" /></el-icon>
            <span>{{ Math.abs(stats.shareTrend) }}%</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { Bell, Message, Share, ArrowUp, ArrowDown } from '@element-plus/icons-vue'

// 定义props
const props = defineProps({
  stats: {
    type: Object,
    default: () => ({
      unread: 0,
      system: 0,
      share: 0,
      unreadTrend: 0,
      systemTrend: 0,
      shareTrend: 0
    })
  }
})

// 获取趋势图标
const getTrendIcon = (trend) => {
  return trend >= 0 ? ArrowUp : ArrowDown
}

// 获取趋势类名
const getTrendClass = (trend) => {
  return trend >= 0 ? 'trend-up' : 'trend-down'
}
</script>

<style scoped>
.notification-stats {
  width: 100%;
}

.section-title {
  margin: 0 0 15px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 15px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.unread-card {
  border-left: 4px solid var(--el-color-danger);
}

.system-card {
  border-left: 4px solid var(--el-color-primary);
}

.share-card {
  border-left: 4px solid var(--el-color-success);
}

.stat-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  margin-right: 15px;
  color: var(--el-text-color-primary);
}

.stat-content {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  margin-bottom: 5px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: var(--el-text-color-primary);
  margin-bottom: 5px;
}

.stat-trend {
  display: flex;
  align-items: center;
  font-size: 12px;
  gap: 4px;
}

.trend-up {
  color: var(--el-color-success);
}

.trend-down {
  color: var(--el-color-danger);
}

/* 响应式布局 */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}
</style> 